﻿<div id="createBlob" class="reveal-modal small" data-bind="modalSuccess: addOnSuccess, enterPressed: create">
    <h2>New Blob</h2>
    <div class="row">
        <div class="large-2 columns">
            <label for="createBlob-name" class="right inline">Name:</label>
        </div>
        <div class="large-10 columns">
            <input id="createBlob-name" type="text" class="enter-focus" data-bind="instantValue: name" />
        </div>
    </div>
    <ul class="button-group round">
        <li>
            <a href="javascript:void(0)" class="button" data-bind="click: setBlockType, hover: setInstantBlockType, css: {inactive: type() != 'BlockBlob'}">Block Blob</a>
        </li>
        <li>
            <a href="javascript:void(0)" class="button" data-bind="click: setPageType, hover: setInstantPageType, css: {inactive: type() != 'PageBlob'}">Page Blob</a>
        </li>
    </ul>
    <p data-bind="visible: instantType() == 'BlockBlob'">
        Use block blobs when you want to use it as regular files.
    </p>
    <p data-bind="visible: instantType() == 'PageBlob'">
        Page blobs are a collection of 512-byte pages optimized for random read and write operations. You can use page blobs as a storage for VHD drives for instance.
    </p>
    <div class="row" data-bind="visible:type() == 'PageBlob' ">
        <div class="large-4 columns">
            <label for="createBlob-length" class="right inline">Page Blob Size:</label>
        </div>
        <div class="large-8 columns">
            <input id="createBlob-length" type="text" data-bind="instantValue: size" />
        </div>
    </div>
    <div class="row" data-bind="visible:type() == 'BlockBlob' ">
        <div class="large-4 columns">
            <label for="createBlob-content" class="right inline">Initial Content:</label>
        </div>
        <div class="large-8 columns">
            <textarea id="createBlob-content" data-bind="value: content" ></textarea>
        </div>
    </div>
    <ul class="error-summary" data-bind="visible: hasErrors()">
        <li data-bind="visible: showNameRequired">Blob name is required.</li>
        <li data-bind="visible: showLength">Container name must be from 1 to 1024 characters long.</li>
    </ul>
    <input type="button" class="button" value="Create" data-bind="click: create" />
    <a class="close-reveal-modal">&#215;</a>
</div>
